<template>
  <div class="g-aside-menus-wrap">
    <div class="g-aside-menus">
      <GLink :to="menu.url" class="g-aside-menus-item" v-for="menu in menus" :key="menu.name"
        :class="{ 'active': menu.key === defaultNav }" @click="handleClick(menu)">
        {{ menu.label }}
      </GLink>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useMenuData } from '~/composables/hooks/useMenuData.ts'
const { menus, defaultNav } = useMenuData()

function handleClick(menu: any) {
  defaultNav.value = menu.key
}

</script>

<style scoped lang="scss">
.g-aside-menus-wrap {

  @media (max-width: 768px) {
    height: 48px;
    max-width: 100%;
   
  }
}

.g-aside-menus {
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: visible;
  height: 100%;

  @media (max-width: 768px) {
    flex-direction: row;
    overflow-x: scroll;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-left: 16px;
    padding-right: 16px;

    &::-webkit-scrollbar {
      display: none;
    }
  }
}

.g-aside-menus-item {
  position: relative;
  height: 100%;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  border: 1px solid var(--theme-bg-hover);
  border-radius: 8px;
  padding: 16px;
  font-size: 18px;
  font-weight: 600;
  overflow: visible;

  &.active,
  &:hover {
    color: var(--theme-link);
    background-color: var(--theme-bg-hover);
  }

  @media (max-width: 768px) {
    font-weight: 400;
    font-size: 14px;
    border: none;
    padding-top: 14px;
    padding-bottom: 14px;
    padding-left: 0px;
    padding-right: 0px;
    line-height: 20px;

    &.active,
    &:hover {
      color: var(--theme-aide-text);
      background-color: transparent;
      font-weight: 600;
    }

    &.active:before {
      content: '';
      display: block;
      width: 100%;
      height: 2px;
      background-color: var(--theme-aide-text);
      position: absolute;
      bottom: 0;
      left: 0;
    }
  }
}
</style>
